<template>
<div class="zuida">
  <div class="shang">
      学号:<el-input
  placeholder="请输入学号"
  v-model="id"
  clearable>
  
</el-input>
      姓名:<el-input
  placeholder="请输入姓名"
  v-model="name"
  clearable>
</el-input>
班级号:<el-input
  placeholder="请输入班级号"
  v-model="classroom"
  clearable>
</el-input>
  <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button></div>
   <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="id"
      label="学号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="150">
    </el-table-column>
    <el-table-column
      prop="classroom"
      label="班级"
      width="150">
    </el-table-column>
    <el-table-column
      prop="class1"
      label="青草选择"
      width="150">
    </el-table-column>
    <el-table-column
      prop="class2"
      label="体育"
      width="150">
    </el-table-column>
    <el-table-column
      prop="class3"
      label="游泳"
      width="150">
    </el-table-column>
    <el-table-column
      prop="class4"
      label="发明"
      width="150">
    </el-table-column>
    <el-table-column
      label="操作"
      width="150">
      <template slot-scope="scope">
        <el-button @click="handleClick2(scope.row),dialogTableVisible2 = true" type="text" size="small"  >编辑</el-button>
        
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <!-- 页数 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="count">
      
    </el-pagination>
    </div>
    <!-- 展示编辑信息 -->
    <el-dialog title="信息编辑" :visible.sync="dialogTableVisible2"
:before-close="handclose">
  <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
  <el-form-item label="羊羊编号: ">
    <el-input  disabled="true" :placeholder="bianji.id"></el-input>
  </el-form-item>
  <el-form-item label="姓名: ">
    <el-input v-model="sizeForm.name" disabled="true" :placeholder="bianji.name"></el-input>
  </el-form-item>
  <el-form-item label="所在班级: ">
    <el-input v-model="sizeForm.classroom" disabled="true" :placeholder="bianji.classroom"></el-input>
  </el-form-item>
  <el-form-item label="选择青草: ">
    <el-input v-model="sizeForm.class1" :placeholder="bianji.class1"></el-input>
  </el-form-item>
  <el-form-item label="体育: ">
    <el-input v-model="sizeForm.class2" :placeholder="bianji.class2"></el-input>
  </el-form-item>
  <el-form-item label="游泳: ">
    <el-input v-model="sizeForm.class3" :placeholder="bianji.class3"></el-input>
  </el-form-item>
  <el-form-item label="发明: ">
    <el-input v-model="sizeForm.class4" :placeholder="bianji.class4"></el-input>
  </el-form-item>
  <el-form-item size="large">
    <el-button type="primary" @click="onSubmit">确认更新</el-button>
    <el-button @click="exit">取消</el-button>
  </el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [],
        sizeForm: {
          id:'',
          name: '',
          classroom:'',
          class1:'',
          class2:'',
          class3:'',
          class4:''
        },
        id:'',
        name:'',
        classroom:'',
        page:0,
        sum:5,
        count:0,
        dialogTableVisible2: false,
        bianji:'',
        token:''
      }
    },mounted(){
      this.token=localStorage.getItem('token')
      this.$store.commit('isShow')
      this.search()
    },
    methods:{
      onSubmit() {
        this.axios.post("/updatescore",this.sizeForm,{
          headers:{
            'token':this.token
          }
        }
        ).then((res)=>{
          if(res.data.msg!="error"){
                this.$message({
          showClose: true,
          message: '恭喜你，更改该用户成绩成功!',
          type: 'success'
        });
        this.search()
        this.dialogTableVisible2=false;
        if(this.dialogImageUrl!=this.sizeForm.img){
             router.go(0);
        }
        console.log(res);
              }
              else{
                this.$message({
               showClose: true,
               message: '抱歉!你还未登录!',
               type: 'warning'
                });
                this.$router.push("/")
              }
          
      }).catch((err)=>{
        this.$message({
          showClose: true,
          message: '抱歉!更改用户信息失败!',
          type: 'warning'
        });
      })
      },
      exit(){
      // this.httpRequestImg = true
        this.dialogTableVisible2=false;
        console.log("999");
        if(this.dialogImageUrl!=this.sizeForm.img){
             router.go(0);
        }
        
      },
      handleClick2(row) {//点击编辑
      this.bianji=row;
        this.sizeForm.id=row.id;
        this.sizeForm.name=row.name;
        this.sizeForm.classroom=row.classroom;
        this.sizeForm.class1=row.class1;
        this.sizeForm.class2=row.class2;
        this.sizeForm.class3=row.class3;
        this.sizeForm.class4=row.class4;
        
      },
      search(){
      this.axios.get("/scoreselect/"+this.page+"/"+this.sum,{
        params:{
          'id':this.id,
        'name':this.name,
        'classroom':this.classroom,
        },
        headers:{
              token:this.token,
          }
      }).then((res)=>{
        console.log(res);
        if(res.data.msg!="error"){
                this.tableData=res.data.data.fengye;
        this.count=res.data.data.count;
        console.log(res.data);
              }
              else{
                this.$message({
               showClose: true,
               message: '抱歉!你还未登录!',
               type: 'warning'
                });
                this.$router.push("/")
              }
        // console.log(res);
        
      })
    },
      handleSizeChange(val) {
        this.sum=val;
        //条数
        // this.student();
        this.search()
      },
      handleCurrentChange(val) {
        //页数
        this.page=(val-1)*this.sum;
        // this.student();
        this.search()
      }
    }
    
  }
</script>
<style lang="less" scoped>
  .zuida{
    width: 100%;
    height: 100%;
    // background-color:blue;
  }
  .shang{
    display: flex;
    position: relative;
    height: 100px;
    font-size: 20px;
    line-height: 100px;
  }
  .shang /deep/ .el-input{
    margin-right: 40px;
    width: 16%;
  }
  /deep/ .el-input__inner{
    font-size: 18px;
  }
  /deep/ .el-select .el-input{
    width: 100px;
  }
  .shang /deep/ .el-button{
    margin-left: 30px;
    // padding: 0;
    height: 40px;
    margin-top: 30px;
  }
  img{
    width: 100%;
  }
  .student{
  width: 100%;
  height: 500px;
}
.index{
    margin-left: 20px;
    width: 100%;
    height: 36px;
    line-height: 36px;
  }
  /deep/ .el-dialog__body{
    font-size: 16px;
    padding: 10px 20px;
  }
  /deep/ .el-dialog{
    width: 30%;
  }
  /deep/ .el-divider--horizontal{
    padding: 0;
    margin: 0;
  }
  /deep/ .el-form-item__label{
    padding: 0;
  }
   .demo-httpRequestImg{
    /deep/ .el-upload--picture-card{
        display: none;
    }
  } 
  .zuida{
    /deep/ .el-upload--picture-card{
      border: 1px dashed #c0ccda00;
}
  }

</style>